<template>
  <div>
    <div class="m-3">
      <router-link tag="a" target="_blank" :to="{path:'/tree/Compare'}" class="me-3">
        移动
      </router-link>
      <router-link tag="a" target="_blank" :to="{path:'/tree/Parent'}" class="me-3">
        查看父级
      </router-link>
      <router-link tag="a" target="_blank" :to="{path:'/tree/Story'}" class="me-3">
        故事
      </router-link>
      <router-link tag="a" target="_blank" :to="{path:'/tree/MuchChildren'}" class="me-3">
        子节点多告警
      </router-link>
      <router-link tag="a" target="_blank" :to="{path:'/tree/PopularWord'}" class="me-3">
        关注与常用
      </router-link>
      <router-link tag="a" target="_blank" :to="{path:'/tree/KeyWord'}" class="me-3">
        关键词统计
      </router-link>
      <router-link tag="a" target="_blank" :to="{path:'/FeedBack'}" class="me-3">
        反馈
      </router-link>
      <router-link tag="a" target="_blank"
                   :to="{path:'/tree/AddProve',query: {id:0,value: '新项目'}}"
                   class="me-3">
        创建新项目
      </router-link>

    </div>
    <div class="m-3">
      <el-autocomplete class="inline-input" v-model="search" placeholder="请输入内容" :fetch-suggestions="querySearch"
                       :trigger-on-focus="false" @select="handleSelect">
      </el-autocomplete>
    </div>
    <div>
      <el-tree ref="treeIn" :data="data" lazy :load="load" :props="props" :default-expanded-keys="idArr"
               node-key="id"
               @node-drop="handleDrop"
               draggable
               v-if="searchFlag"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <router-link tag="a" target="_blank" :to="{path:'/tree/Book',query: {id: data.id}}">
              {{ data.value }}
        </router-link>
      </span>
      </el-tree>
    </div>
    <div>
      <el-tree ref="treeIn" :data="data" lazy :load="load" :props="props" :default-expanded-keys="idArr"
               node-key="id"
               @node-drop="handleDrop"
               draggable
               v-if="!searchFlag"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <router-link tag="a" target="_blank" :to="{path:'/tree/Book',query: {id: data.id}}">
              {{ data.value }}
        </router-link>
      </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import {ProveApi, ProveBlueprintApi_contain_value} from "@/api/api";
import {getJson, putJson} from "@/api/http";

export default {
  name: "CatalogueComponent",
  data() {
    return {
      searchFlag: true,
      splitRules: [{id: 1, value: 122}, {value: 122}, {value: 122}],
      search: "",
      parent_id: 0,
      data: [],
      idArr: [1],
      // idArr: [1, 2, 3],
      props: {
        label: 'value',
        children: 'zones',
      },
    }
  },
  methods: {
    async querySearch(queryString, callback) {
      let paras = {value: queryString}
      let res = await getJson(ProveBlueprintApi_contain_value + "/" +  0, paras)
      this.splitRules = res.data
      callback(this.splitRules)
    },

    async handleSelect(item) {
      this.parent_id = item.parent_id
      this.searchFlag = !this.searchFlag
    },
    async load(node, resolve) {
      let paras = {}
      if (node.level === 0) {
        paras = {parent_id: this.parent_id}
      } else {
        paras = {parent_id: node.data.id}
      }
      let res = await getJson(ProveApi + "/" + 0, paras)
      resolve(res.data)
    },
    async handleDrop(draggingNode, dropNode, dropType, ev) {
      if (dropType === "inner") {
        draggingNode.data.parent_id = dropNode.data.id
      }
      if (dropType === "after") {
        draggingNode.data.parent_id = dropNode.data.parent_id
      }
      if (dropType === "before") {
        draggingNode.data.parent_id = dropNode.data.parent_id
      }
      let res3 = await putJson(ProveApi+ '/' +  draggingNode.data.id, draggingNode.data);
      if(res3.code !== 1){
        this.$message.error('服务异常')
      }
    },
  },
}
</script>

<style scoped>

</style>